<template>
  <div class="cabinets-index-container">
    <el-card>
      <el-tabs v-model="activeArea" @tab-click="handleAreaChange">
        <el-tab-pane v-for="area in areas" :key="area" :label="`${area}区`" :name="area"></el-tab-pane>
      </el-tabs>

      <!-- 渲染子路由组件 (Area.vue) -->
      <router-view />

    </el-card>

    <!-- 柜子操作对话框 (保留对话框，虽然可能主要在 Row 或 Detail 使用) -->
    <!-- 暂时保留，后续看是否需要移动 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <div v-if="selectedCabinet">
        <p>柜子编号：{{ selectedCabinet.id }}</p>
        <p>状态：{{ getStatusText(selectedCabinet.status) }}</p>
        <template v-if="selectedCabinet.status === 'available'">
          <el-button type="primary" @click="handleUseCabinet">使用柜子</el-button>
        </template>
        <template v-else-if="selectedCabinet.status === 'in_use'">
          <p>开始时间：{{ formatDate(selectedCabinet.startTime) }}</p>
          <p>使用密码：{{ selectedCabinet.password }}</p>
          <el-button type="danger" @click="handleReleaseCabinet">释放柜子</el-button>
        </template>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "CabinetsIndex",
  data() {
    return {
      activeArea: "A", // 默认激活区域
      dialogVisible: false,
      selectedCabinet: null
    };
  },
  computed: {
    ...mapState({
      areas: (state) => state.cabinets.areas,
      // rows: (state) => state.cabinets.rows, // Index 页面不再直接使用 rows
      user: (state) => state.user
    }),
    ...mapGetters(["getCabinetsByRow"]), // 这个 getter 在 Index 页面可能不再需要
    isAdmin() {
      return this.user && this.user.role === "admin";
    },
    dialogTitle() {
      return this.selectedCabinet ? `柜子 ${this.selectedCabinet.id} 详情` : "柜子详情";
    }
  },
  watch: {
    // 监听路由变化，激活对应的 Area Tab
    '$route.params.area': {
      immediate: true,
      handler(newArea) {
        if (newArea && this.areas.includes(newArea)) {
          this.activeArea = newArea;
        } else if (this.areas.length > 0) {
           // 如果路由中没有指定区域或区域不存在，默认跳转到第一个区域
           this.$router.replace(`/cabinets/${this.areas[0]}`).catch(()=>{});
        }
      }
    }
  },
  created() {
    // 初始化柜子数据 (如果需要)
    // Removed: this.$store.dispatch("initCabinets"); // Unknown action type
    // 当进入 /cabinets 路由但没有指定区域时，默认跳转到第一个区域
    if (this.$route.path === '/cabinets' && this.areas.length > 0) {
        this.$router.replace(`/cabinets/${this.areas[0]}`).catch(()=>{});
    }
  },
  methods: {
    // 这个方法在 Index 页面可能不再需要，因为它不再显示排列表
    // getCabinetsByAreaAndRow(area, row) {
    //   return this.getCabinetsByRow(area, row);
    // },
    getStatusText(status) {
      const statusMap = {
        available: "空闲",
        in_use: "使用中"
      };
      return statusMap[status] || status;
    },
    formatDate(date) {
      if (!date) return "-";
      return new Date(date).toLocaleString();
    },
    handleAreaChange(tab) {
      // 点击 Area Tab 时导航到对应的区域路由
      this.$router.push(`/cabinets/${tab.name}`);
    },
    // 这个方法在 Index 页面不再需要，因为它不再显示排卡片的查看详情
    // handleViewRow(area, row) {
    //   this.$router.push(`/cabinets/${area}/${row}`);
    // },
    // 这个方法在 Index 页面可能不再需要，因为它不再显示具体的柜子 item
    // handleCabinetClick(cabinet) {
    //   this.selectedCabinet = cabinet;
    //   this.dialogVisible = true;
    // },
    // 这些方法在 Index 页面可能不再直接调用，留待对话框触发或移动到子组件
    async handleUseCabinet() { /* ... */ },
    async handleReleaseCabinet() { /* ... */ },

    handleAddCabinet() {
      // TODO: 实现添加柜子功能
      this.$message.info("添加柜子功能开发中");
    }
  }
};
</script>

<style scoped>
.cabinets-index-container {
  padding: 20px;
}

/* 以下样式可能主要在 Area 和 Row 组件中使用，Index 中不再需要 */
/*
.mb-20 { margin-bottom: 20px; }
.row-card { margin-bottom: 20px; }
.cabinet-grid { ... }
.cabinet-item { ... }
.cabinet-item.available { ... }
.cabinet-item.in_use { ... }
.cabinet-item.maintenance { ... }
.cabinet-number { ... }
.cabinet-status { ... }
*/

</style>
